/**
 * Created by zhouli on 18/2/3
 * Email li.zhou@huilianyi.com
 */
import React from 'react';
import {Icon} from 'antd';
import 'styles/enterprise-manage/org-structure/org-component/org-search-list.scss';
import {messages} from "share/common";

class OrgSearchList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},//传入的数据:包含搜索的部门或者人
    };
  }

  componentWillMount() {
    this.setState({data: this.props.searchList});
  }

  componentWillReceiveProps(nextProps) {
    this.setState({data: nextProps.searchList});
  }

  //选择这个
  selectedHandle = (item, index) => {
    if (item.userOID) {
      let {data} = this.state;
      data.personList.map((item) => {
        item.actived = false;
      })
      data.personList[index].actived = true;
      this.setState({data: data});
      this.props.selectItemHandle(item);
    } else {
      this.props.selectItemHandle(item);
    }
  };

  //渲染搜索部门
  renderSearchListDep(list) {
    if (list.length < 1) {
      if (this.props.isSearchOver) {
        return (
          <div className="no-dep"><Icon type="frown"/>
            {messages('enterprise-manage.key163'/*没有搜索到部门*/)}
          </div>
        )
      }else {
        return (
          <div className="no-person"><Icon type="frown"/>
            {messages('enterprise-manage.key164'/*正在搜索...*/)}
          </div>
        )
      }
    }
    return list.map((item) => {
      return <div className={item.actived ? "re-dep-item-active" : "re-dep-item"} key={item.departmentOID}
                  onClick={
                    () => { this.selectedHandle(item)}
                  }
      >
        <div className="type-icon">
          <Icon type="folder"/>
        </div>
        <div className="name"><span className="dep-code">{item.custDeptNumber ? item.custDeptNumber : '-'}</span>&nbsp;&nbsp;{item.path} </div>
        <div className="clear"/>
      </div>
    })
  }

  //渲染搜索的人
  renderSearchListPerson(list) {
    if (list.length < 1) {
      if (this.props.isSearchOver) {
        return (
          <div className="no-person"><Icon type="frown"/>
            {messages('enterprise-manage.key165'/*没有搜索到员工*/)}
          </div>
        )
      } else {
        return (
          <div className="no-person"><Icon type="frown"/>
            {messages('enterprise-manage.key164'/*正在搜索...*/)}
          </div>
        )
      }
    }
    return list.map((item, index) => {
      return <div className={item.actived ? "re-person-item-active" : "re-person-item"} key={item.userOID}
                  onClick={() => {this.selectedHandle(item, index)}}>
        <div className="type-icon">
          <Icon type="user"/>
        </div>
        <div className="name">{item.fullName}</div>
        <div className="clear"/>
      </div>
    })
  }

  render() {
    let {data} = this.state;
    return (
      <div className="org-search-list-wrap">
        <div className="list-person">
          <div className="list-person-title">
            {messages('enterprise-manage.key166'/*成员*/)}
          </div>
          <div className="list-person-wrap">
            {this.renderSearchListPerson(data.personList)}
          </div>
        </div>
        <div className="list-dep">
          <div className="list-dep-title">
            {messages('enterprise-manage.key167'/*部门*/)}
          </div>
          <div className="list-dep-wrap">
            {this.renderSearchListDep(data.depList)}
          </div>
        </div>
      </div>
    )
  }
}

OrgSearchList.propTypes = {
  isSearchOver: React.PropTypes.bool,//是否搜索完毕
  searchList: React.PropTypes.object.isRequired,
  selectItemHandle: React.PropTypes.func.isRequired,//当前被选择的人或部门
};
OrgSearchList.defaultProps = {
  isSearchOver: false
};
//加入多语言
export default OrgSearchList;
